<template>
  <div id="message_contain">
    <div class="messsagebox" id="messagebox">
      <div class="mseleft">
        <div class="titlebox">
          <h3>留言区</h3>
          <span class="color"></span>
        </div>
        <el-input
          :placeholder="placeholder"
          maxlength="10"
          show-word-limit
          prefix-icon="el-icon-user-solid"
          v-model="name"
          clearable
          :disabled="disabled"
        ></el-input>
        <el-input
          type="textarea"
          maxlength="150"
          show-word-limit
          placeholder="请输入内容"
          v-model="content"
          clearable
          resize="none"
          rows="4"
          id="message"
        ></el-input>
        <div class="btubox icon">
          <div class="btu_left">
            <div class="img_box">
              <img class="emoji-panel-btn" src="/images/face.png" @click="changeShow" />

              <chat-emoji class="emoji" :page="type" @addEmoji="appendEmoji" v-show="showEmoji"></chat-emoji>
            </div>
            <div class="imgbox">
              <img
                v-if="!getToken"
                class="emoji-panel-btn select-img"
                src="/images/avatars.png"
                @click="changeAvatars"
              />
              <span v-if="!getToken" v-html="imgSrc ? '用户头像:' : '未选择用户头像'"></span>
              <img v-if="imgSrc" class="emoji-panel-btn" :src="imgSrc" alt />
              <div class="avatars_box" v-show="showAvatars">
                <div v-for="(item, index) in 8" :key="index">
                  <img
                    :src="'/images/' + item + '.png'"
                    alt
                    :class="index == currentIndex ? 'active' : ''"
                    @click="selectImg(index)"
                  />
                </div>
              </div>
            </div>
          </div>
          <div>
            <el-button
              type="primary"
              icon="el-icon-s-promotion"
              @click="postmessage"
              style="marginLeft:10px"
            >发表留言</el-button>
          </div>
        </div>
        <div class="titlebox">
          <span class="color"></span>
          <h3>查找区</h3>
        </div>
        <el-input
          placeholder="输入昵称后即可查找相关留言"
          maxlength="10"
          show-word-limit
          prefix-icon="el-icon-search"
          v-model="serachName"
          clearable
        ></el-input>
        <div class="btubox searchbox">
          <div></div>
          <div>
            <el-button type="primary" icon="el-icon-search" @click="serachall">查看所有</el-button>
            <el-button type="primary" icon="el-icon-search" @click="serachmessage">立即查找</el-button>
          </div>
        </div>
      </div>
      <div class="mseright">
        <div class="boxtitle">留言板</div>
        <div class="scrollbox">
          <my-scroll>
            <div>
              <el-card class="box-card" v-for="(item, index) in messageArray" :key="index">
                <div slot="header" class="clearfix">
                  <div class="img_box">
                    <img v-if="item.isAdmin" :src="getAdmin.photo" alt />
                    <img v-else-if="!item.isAdmin && item.photo" :src="item.photo" alt />
                    <img v-else :src="'/images/' + ((index % 7) + 1) + '.png'" alt />
                  </div>
                  <div class="info_box">
                    <div class="userName" :class="{ adminName: item.isAdmin }">
                      {{ item.isAdmin ? getAdmin.userName : item.name }}
                      <i
                        class="isAdmin"
                        v-if="item.isAdmin"
                      >博主</i>
                    </div>
                    <div class="date">{{ item.date | chatDateFormate }}</div>
                  </div>
                </div>
                <div class="msgcont">
                  <div :class="{ admincont: item.isAdmin }" v-html="item.content" class="contbox"></div>
                  <div class="c_opera">
                    <i
                      class="iconfont icon-message"
                      style="fontSize:18px"
                      @click="changeIndex(index)"
                    >({{ item.children ? item.children.length : 0 }})</i>
                  </div>
                  <div v-if="index == currentIndex">
                    <com-item
                      :inputID="'text' + currentIndex"
                      @handleCom="
                        handleCom($event, {
                          toUser: item,
                          message: item.content,
                          id: item._id,
                        })
                      "
                    ></com-item>
                    <div class="childcomt" v-if="item.children.length">
                      <div
                        class="child_item"
                        v-for="(item2, index2) in item.children"
                        :key="index2"
                      >
                        <div class="namebox">
                          <div class="child_avatars">
                            <img
                              :src="
                                item2.fromUser.isAdmin
                                  ? getAdmin.photo
                                  : item2.fromUser.photo
                              "
                              alt
                            />
                          </div>
                          <div class="child_info">
                            <div class="from">
                              {{
                              item2.fromUser.isAdmin
                              ? getAdmin.userName
                              : item2.fromUser.name
                              }}
                              <i
                                class="isAdmin"
                                v-if="item2.fromUser.isAdmin"
                              >博主</i>
                              <!-- <i class="isAdmin">博主</i> -->
                            </div>
                            <div class="c_time">{{ item2.c_date | chatDateFormate }}</div>
                          </div>
                        </div>
                        <div class="c_content">
                          <span class="to">
                            @{{
                            item2.toUser.isAdmin
                            ? getAdmin.userName
                            : item2.toUser.name
                            }}
                            <i
                              class="isAdmin"
                              v-if="item2.toUser.isAdmin"
                            >博主</i>
                            <!-- <i class="isAdmin">博主</i> -->
                          </span>
                          <span>{{ item2.c_content }}</span>
                        </div>
                        <div class="c_other">
                          <i
                            class="el-icon-delete delete"
                            @click="deleteCom(item._id, item2.c_date)"
                            v-if="$store.state.isLogin"
                          ></i>
                          <i
                            class="iconfont icon-message"
                            @click="chageComIndex(index, index2)"
                            style="fontSize:15px"
                          ></i>
                        </div>
                        <div v-if="-Math.ceil(index + 1) + '' + index2 == comIndex">
                          <com-item
                            :inputID="'reply' + index2"
                            @handleCom="
                              handleCom($event, {
                                toUser: item2.fromUser,
                                message: item2.c_content,
                                id: item._id,
                              })
                            "
                          ></com-item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-card>
            </div>
          </my-scroll>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from '../../api/request'
import comItem from '../../components/comment/comitem'
import ChatEmoji from '../../components/chatEmoji/emoji'
import { mapGetters } from 'vuex'
export default {
  name: 'message',
  data() {
    return {
      placeholder: '',
      admin: '',
      name: '',
      content: '',
      serachName: '',
      disabled: false,
      crrentPage: 1,
      maxPage: 0,
      showEmoji: false,
      showReply: false,
      limit: 6,
      messageArray: [],
      comIndex: 0,
      currentIndex: -1,
      type: 'other',
      showAvatars: false,
      imgSrc: '',
      info: null,
      messageType: '',
      replyData: null
    }
  },
  created() {
    this.$store.commit('updatePath', '/module/message')
    this.getmessage({ name: '' })
  },
  mounted() {
    this.disabled = Boolean(this.getToken)
    this.placeholder = this.getToken
      ? '已经登录，不需要输入用户名'
      : '请输入用户名'
  },
  components: {
    ChatEmoji,
    comItem
  },
  computed: {
    ...mapGetters(['getAdmin', 'getToken', 'getUser'])
  },
  watch: {
    getToken: function () {
      this.disabled = Boolean(this.getToken)

      if (this.messageType == 'message') {
        this.info.account = this.getUser.account
        this.message()
      } else if (this.messageType == 'reply') {
        if (this.childData && this.childData.fromUser) {
          this.replyData.fromUser.account = this.getUser.account
        }
        this.reply()
      }
    }
  },
  methods: {
    changeIndex(index) {
      if (this.currentIndex == index) {
        this.currentIndex = -1
      } else {
        this.currentIndex = index
      }
    },
    changeShow() {
      this.showEmoji = !this.showEmoji
      this.showAvatars = false
    },
    changeAvatars() {
      this.showAvatars = !this.showAvatars
      this.showEmoji = false
    },
    chageComIndex() {
      let index = -[Math.ceil(arguments[0] + 1) + '' + arguments[1]]
      if (this.comIndex == index) {
        this.comIndex = 0
      } else {
        this.comIndex = index
      }
    },
    // 发布留言
    async postmessage() {
      this.messageType = 'message'
      if (this.getToken) {
        this.info = {
          name: this.getUser.userName,
          content: this.content,
          photo: this.getUser.photo,
          account: this.getUser.account,
          isAdmin: this.getUser.isAdmin,
          date: new Date()
        }
        this.message()
      } else if (this.name == '' || this.content == '') {
        this.$notify.error({
          title: '错误',
          message: '昵称或者内容不能为空'
        })
      } else if (this.imgSrc == '') {
        this.$notify.error({
          title: '错误',
          message: '未选择用户头像'
        })
      } else {
        // 进行静默注册
        this.$store.dispatch('silentRegistered', {
          userName: this.name,
          photo: this.imgSrc
        })
        this.info = {
          name: this.name,
          content: this.content,
          photo: this.imgSrc,
          date: new Date()
        }
      }
    },
    // 发布留言（请求）
    async message() {
      let res = await request({
        url: '/message/release',
        data: this.info,
        method: 'post'
      })
      if (res.status) {
        this.$notify({
          title: '成功',
          message: res.msg,
          type: 'success'
        })
        this.getmessage({ name: '' })
      } else {
        this.$message.error(res.msg)
      }
    },
    // 获取留言
    async getmessage(args) {
      let res = await request({
        url: '/message/obtain',
        data: args,
        method: 'get'
      })
      if (res.status) {
        this.messageArray = res.data
        this.name = ''
        this.content = ''
      } else {
        this.$message.error(res.msg)
      }
      this.messageArray = this.messageArray.map((item) => {
        if (item.children) {
          item.children = item.children.reverse()
        }
        return item
      })
    },
    // 查找全部留言
    serachall() {
      this.getmessage({ name: '' })
    },
    // 查找留言
    serachmessage() {
      this.getmessage({ name: this.serachName })
    },

    // 回复留言
    async handleCom(child, obj) {
      this.messageType = 'reply'
      this.replyData = {
        fromUser: child.fromUser,
        c_content: child.c_content,
        c_date: child.c_date,
        message: obj.message,
        toUser: obj.toUser,
        parentId: obj.id
      }
      if (this.getToken) {
        this.replyData.fromUser.account = child.fromUser.account
        this.reply()
      } else {
        // 进行静默注册
        this.$store.dispatch('silentRegistered', {
          userName: child.fromUser.name,
          photo: child.fromUser.photo
        })
      }
    },
    async reply() {
      let result = await request({
        url: '/message/release/child',
        data: this.replyData,
        method: 'post'
      })
      this.getmessage({})
      this.comIndex = 0
    },
    // 添加表情
    appendEmoji(emoji) {
      this.content = this.content + emoji
      this.showEmoji = false
      let input_dom = document.getElementById('message')
      input_dom.focus()
    },
    selectImg(index) {
      this.imgSrc = '/images/' + (index + 1) + '.png'
      this.showAvatars = false
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../../scss/common.scss';
@import './message.scss';
</style>
